<template>
  <view class="container">
    <view class="header">
      <view class="title">
        <text class="main-text">企业</text>
        <text class="highlight">管理</text>
        <text class="main-text">小程序</text>
      </view>
      <view class="subtitle">快捷审批 掌上便利</view>
    </view>
    <!-- 功能区域 -->
    <view class="function-area">
      <uni-grid :column="2" :highlight="false" :show-border="false" :square="false">
        <uni-grid-item v-for="(item,index) in functionList" :key="index">
          <view class="grid-item" @click="handleClick(item)">
            <image :src="item.icon" mode="aspectFit" class="item-icon"></image>
            <text class="item-text">{{item.title}}</text>
            <view class="badge" v-if="item.badge && total !==0">{{total}}</view>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>
  </view>
</template>

<script>
  import tabbar from '@/mixins/tabbar-badge.js'
  import bageMix from '@/mixins/auth.js'
  import {
    mapGetters,
    mapState,
    mapActions
  } from 'vuex'
  import {
    PERMISSION_IDS
  } from '@/utils/constants/permission.js'
  export default {
    mixins: [bageMix, tabbar],
    computed: {
      ...mapGetters('permission', ['hasRolePermission']),
      ...mapState('m_mess', ['total']),
      roleId() {
        return this.$store.state.m_user.employeeInfo?.roleId
      }
    },
    data() {
      return {
        timer: null,
        functionList: [{
            title: '考勤打卡',
            icon: '/static/tab_icons/clock-acitve.png',
            type: 'clock',
            tabBarPage: true,
            path: '/pages/clock/clock'
          },
          {
            title: '我的申请',
            icon: '/static/tab_icons/submit-active.png',
            type: 'myApple',
            tabBarPage: true,
            path: '/pages/application/application',
            badge: '1',
          },
          {
            title: '待我审批',
            icon: '/static/page_icons/pending.png',
            type: 'pending',
            tabBarPage: false,
            path: '/subpkg/pending/pending?type=pending',
            permssionId: PERMISSION_IDS.PENDING_APPROVAL
          },
          {
            title: '我已审批',
            icon: '/static/page_icons/approved.png',
            type: 'approved',
            tabBarPage: false,
            path: '/subpkg/approved/approved?type=approved',
            permssionId: PERMISSION_IDS.APPROVED
          }
        ]
      };
    },
    onLoad() {
    },
    onUnload() {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
    },
    methods: {
      handleClick(item) {
        if (item.tabBarPage) {
          uni.switchTab({
            url: item.path
          })
        } else {
          this.checkPermissionAndNavigatePro(item)
        }
      },
      /**
       * @description 检查当前用户所拥有的权限
       */
      checkPermissionAndNavigatePro(item) {
        console.log(this.roleId)
        console.log(item.permssionId)
        console.log(this.hasRolePermission(this.roleId, item.permssionId))
        if (this.hasRolePermission(this.roleId, item.permssionId)) {
          uni.navigateTo({
            url: item.path
          })
        } else {
          uni.$showMsg(`您没有相关的权限`)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background: linear-gradient(180deg, #2b7ff3 0%, #f5f5f5 100%);
  }

  .header {
    padding: 100rpx 0;
    padding-bottom: 40rpx;

    .title {
      text-align: center;
      font-size: 40rpx;
      font-weight: bold;

      .main-text {
        color: #fff;
      }

      .highlight {
        color: #ffd700;
        margin: 0 10rpx;
      }
    }

    .subtitle {
      text-align: center;
      color: rgba(255, 255, 255, 0.8);
      font-size: 28rpx;
    }
  }

  .function-area {
    margin-top: 60rpx;

    :deep(.uni-grid) {
      padding: 20rpx;
    }

    .grid-item {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 30rpx;
      margin: 10rpx;
      position: relative;
      height: 180rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

      .item-icon {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 20rpx;
      }

      .item-text {
        font-size: 28rpx;
      }

      .badge {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        background: #ff4d4f;
        font-size: 24rpx;
        padding: 4rpx 12rpx;
        border-radius: 20rpx;
        min-width: 32rpx;
        text-align: center;
      }
    }
  }
</style>